<template>
  <div class="part-detail-content">
    <RadioGroup v-model="componentName" type="button" >
      <Radio label="component">组件</Radio>
      <Radio label="vulnerability">测试漏洞</Radio>
      <Radio label="bug">测试缺陷</Radio>
      <Radio label="potentialThreat">潜在漏洞</Radio>
    </RadioGroup>
    <div class="asset-detail-content-components">
      <ModuleManage v-if="componentName === 'component'" ref="component" :productId="$route.query.productId" :isPublic="$route.query.isPublic"/>
      <potential-vulnerability
        v-if="componentName === 'potentialThreat'"
        ref="potentialThreat"
        :productId="$route.query.productId"
        :partId="$route.query.id"></potential-vulnerability>
      <bugManage v-if="componentName === 'bug'"
        :module="$route.query.id"
        :productId="$route.query.productId"
        ref="bug"/>
      <leakManageDo v-if="componentName === 'vulnerability'" ref="vulnerability"/>
    </div>
  </div>
</template>

<script>
import ModuleManage from './module-manage.vue'
import leakManageDo from './leakManageDo'
import PotentialVulnerability from "./potential-vulnerability.vue";
import bugManage from "./bugManage.vue";


export default {
  name: 'AssetDetailContent',
  components: {
    PotentialVulnerability,
    ModuleManage,
    leakManageDo,
    bugManage
  },
  data() {
    return {
      componentName: 'component'
    }
  },
  watch: {
    componentName(name) {
      this.$nextTick(()=>{
        if(this.$refs[name]&&this.$refs[name].init&&typeof this.$refs[name].init=='function'){
          // //为从被测对象跳转到测试环境特别处理
          this.$refs[name].init({});
        }
      })
    }
  },
  mounted() {
    this.$store.commit('addBreadItem', { name: this.$route.query.assetName,
      to:{path:'/assetDetail',
        query:{
          name:this.$route.query.assetName,
          fromMenu:'assetInfo',
          productId:this.$route.query.productGroupId
        }}
    });
    this.$store.commit('addBreadItem', { name: this.$route.query.partName });
  }
}
</script>

<style scoped>
.part-detail-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

}
.asset-detail-content .asset-detail-content-components {
  margin-top: 20px;
  flex: 1;
  height: 0;
}
</style>
